'use client'

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, Card, Alert, Typography, Space } from 'antd'
import { MailOutlined, LockOutlined, UserOutlined, ArrowRightOutlined } from '@ant-design/icons'

const { Title, Text } = Typography

const SvideoPath = '/svideo'

export default function AuthForm() {
  const [form] = Form.useForm()
  const [isRegistering, setIsRegistering] = useState(false)
  const [message, setMessage] = useState('')
  const navigate = useNavigate()

  const handleSubmit = async (values) => {
    if (isRegistering) {
      // 处理注册逻辑
      setMessage('注册成功！请检查您的邮箱以验证账户。')
    } else {
      // 处理登录逻辑
      // 这里通常会发送请求到后端进行验证
      // 假设登录成功
      setMessage('登录成功！')
      // 登录成功后跳转到 SvideoPath
      setTimeout(() => {
        navigate(SvideoPath)
      }, 1000) // 延迟1秒后跳转，让用户看到成功消息
    }
  }

  const handleForgotPassword = () => {
    const email = form.getFieldValue('email')
    if (email) {
      setMessage('密码重置链接已发送到您的邮箱。')
    } else {
      setMessage('请输入您的邮箱地址。')
    }
  }

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      background: '#f0f2f5'
    }}>
      <Card style={{ width: 350 }}>
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <Title level={3}>{isRegistering ? '注册' : '登录'}</Title>
          <Text type="secondary">
            {isRegistering ? '创建账户以加入会议' : '登录您的账户'}
          </Text>
          <Form form={form} onFinish={handleSubmit} layout="vertical">
            {isRegistering && (
              <Form.Item
                name="name"
                rules={[{ required: true, message: '请输入您的姓名' }]}
              >
                <Input prefix={<UserOutlined />} placeholder="输入您的姓名" />
              </Form.Item>
            )}
            <Form.Item
              name="email"
              rules={[
                { required: true, message: '请输入您的邮箱' },
                { type: 'email', message: '请输入有效的邮箱地址' }
              ]}
            >
              <Input prefix={<MailOutlined />} placeholder="your@example.com" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入您的密码' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="输入密码" />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                {isRegistering ? '注册' : '登录'}
                <ArrowRightOutlined />
              </Button>
            </Form.Item>
          </Form>
          {!isRegistering && (
            <Button type="link" onClick={handleForgotPassword} style={{ padding: 0 }}>
              忘记密码？
            </Button>
          )}
          <Button type="text" onClick={() => setIsRegistering(!isRegistering)} block>
            {isRegistering ? '已有账户？登录' : "没有账户？注册"}
          </Button>
          {message && (
            <Alert
              message="通知"
              description={message}
              type="info"
              showIcon
            />
          )}
        </Space>
      </Card>
    </div>
  )
}